<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/admin/home">首页</el-breadcrumb-item>
      <el-breadcrumb-item>留言管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="leavewords-container">
      <el-row>
        <el-col :span="10">
          <!-- 按钮 -->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="delectLeaveWords"> 删除留言 </el-button>
        </el-col>
        <el-col :span="8" :offset="6">
          <el-input size="small" placeholder="请输入用户名关键字" prefix-icon="el-icon-search" v-model="searchMsg"></el-input>
          <el-button type="primary" size="mini" @click="searchLeaveWords">搜索</el-button>
        </el-col>
      </el-row>
      <el-table border stripe :data="leavewords" @selection-change="selectId">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="name"></el-table-column>
        <el-table-column label="留言时间" prop="create_time"></el-table-column>
        <el-table-column label="留言内容" prop="content"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="replyWords(scope.row)">
              <i class="el-icon-edit"></i>
              回复
            </el-button>
            <el-button type="danger" size="mini" @click="deleteOneById(scope.row)">
              <i class="el-icon-delete"></i>
              删除
            </el-button>
          </template></el-table-column
        >
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="留言信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="留言用户:" :label-width="formLabelWidth">
          {{ form.name }}
        </el-form-item>
        <el-form-item label="留言时间:" :label-width="formLabelWidth">
          {{ form.create_time }}
        </el-form-item>
        <el-form-item label="留言内容:" :label-width="formLabelWidth">
          {{ form.content }}
        </el-form-item>
        <el-form-item label="回复内容:" :label-width="formLabelWidth">
          <el-input type="textarea" placeholder="请输入内容" v-model="form.replyContent" maxlength="30" show-word-limit> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="reply()">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Myleavewords',

  data() {
    return {
      form: {
        id: 0,
        name: '',
        content: '',
        create_time: '',
        replyContent: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      leavewords: [],
      page: 1,
      size: 5,
      total: 0,
      selectLeaveWords: [],
      searchMsg: ''
    }
  },
  created() {
    this.getLeaveWords()
  },
  mounted() {},

  methods: {
    async getLeaveWords() {
      const { result, page } = await this.$http.get('/BlogLeaveWords', { params: { page: this.page, size: this.size } })
      this.page = Number(page)
      this.leavewords = result.data
      this.total = result.total
    },
    handleSizeChange(val) {
      this.size = val
      this.getLeaveWords()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getLeaveWords()
    },
    selectId(val) {
      this.selectLeaveWords = []
      val.forEach(item => {
        this.selectLeaveWords.push(item.id)
      })
    },
    async delectLeaveWords() {
      if (this.selectLeaveWords.length == 0) {
        this.$message({
          type: 'error',
          message: '请选择要删除的留言',
          duration: 1000
        })
        return
      }
      const data = await this.$http.delete('/BlogLeaveWords', { data: { selectLeaveWords: this.selectLeaveWords } })
      this.$message({
        type: 'success',
        message: data.message,
        duration: 1000
      })
      this.getLeaveWords()
    },
    async deleteOneById(val) {
      const id = val.id
      const data = await this.$http.delete(`/BlogLeaveWords/${id}`)
      this.$message({
        type: 'success',
        message: data.message,
        duration: 1000
      })
      this.getLeaveWords()
    },
    async searchLeaveWords() {
      const { result } = await this.$http.get('/BlogLeaveWords/search/LeaveWords', { params: { page: this.page, size: this.size, searchMsg: this.searchMsg } })
      if (result.data.length == 0) {
        this.$message({
          type: 'error',
          message: '该用户没有留言',
          duration: 1000
        })
        this.searchMsg = ''
        return
      }
      this.leavewords = result.data
      this.searchMsg = ''
    },
    replyWords(val) {
      //显示对话框
      this.dialogFormVisible = true
      //赋值
      this.form.id = val.id
      this.form.name = val.name
      this.form.content = val.content
      this.form.create_time = val.create_time
    },
    reply() {
      if (this.form.replyContent == '') {
        this.$message({
          type: 'warning',
          message: '请输入回复内容'
        })
      } else {
        this.$http
          .put(`/BlogLeaveWords/${this.form.id}`, {
            replycontent: this.form.replyContent
          })
          .then(res => {
            if (res.code) {
              this.AllCommentsNum -= 1
              this.dialogFormVisible = false
              this.form.replyContent = ''
              this.$message({
                type: 'success',
                message: res.msg
              })
              // this.leavewordsNum-=1
              this.getLeaveWords(this.currentPage, this.leavewordsNum, this.param)
            } else {
              this.$message({
                type: 'warning',
                message: res.msg
              })
            }
          })
      }
    }
  }
}
</script>

<style scoped>
.leavewords-container {
  margin-top: 20px;
  min-height: 600px;
}
.el-input {
  width: 70%;
  margin-right: 10px;
}
.el-table{
  margin-top: 20px;
}
</style>
